<template>
  <div class="gylx-container">
    <div class="gongnengQuyu">
      <el-button :icon="Plus" plain type="primary" @click="query">
        查询
      </el-button>
      <el-button
        :icon="SuccessFilled"
        plain
        type="primary"
        @click="baocunqidong = true"
      >
        保存
      </el-button>
    </div>
    <el-divider />
    <div style="height: 10px"></div>
    <el-row>
      <el-col :span="16">
        <el-row>
          <el-col>
            <toubuMiaoshu :value="state.gylxData" :xuhao="state.state" />
          </el-col>
        </el-row>
        <el-row style="height: 20px" />
        <el-row>
          <el-col><luxian :value="state.gylxData" /></el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <gxweihu />
      </el-col>
    </el-row>
    <gylxXuanzeInv ref="gxzi" @selected-callback="selectedCallback" />
    <el-dialog v-model="baocunqidong" title="维护版本并保存">
      <div>确定保存工艺路线</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="baocunqidong = false">取消</el-button>
          <el-button type="primary" @click="quedingBaocunGongyiLuxian">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { Plus, SuccessFilled } from '@element-plus/icons-vue'
  import gylxXuanzeInv from './modules/gylx_xuanzeInv.vue'
  import { getProutingApi } from '@/api/mes/prouting_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  import toubuMiaoshu from './modules/toubu_miaoshu.vue'
  import luxian from './modules/luxian.vue'
  import gxweihu from './modules/gxweihu.vue'
  import { ref } from 'vue'
  import { addProutingApi } from '@/api/mes/prouting_api'
  import { useRoute } from 'vue-router'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const route = useRoute()
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const gxzi = ref()

  const state = reactive({
    xuhao: 0,
    gylxData: [],
  })

  const baocunqidong = ref(false)

  const selectedInv = ref()

  const quedingBaocunGongyiLuxian = async () => {
    const load = $baseLoading()
    try {
      if (state.gylxData.length === 0) {
        $baseMessage('请先选择一个存货维护工艺路线', 'warning')
        return
      }
      const res = await addProutingApi(state.gylxData[state.xuhao])
      if (res.code === 2000) {
        $baseMessage(res.msg, 'success')
        baocunqidong.value = false
        getProuts()
      } else {
        $baseMessage(res.msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const query = () => {
    gxzi.value.toOpenXuanzeInvDialog()
  }

  const getProuts = async () => {
    let params = {
      pkCorp: pkCorp,
      pkInv: selectedInv.value.pkInv,
      invcode: selectedInv.value.invcode,
    }
    const res = await getProutingApi(params)
    if (res.code === 2000) {
      $baseMessage(res.msg, 'success')
      if (res.data.length === 0) {
        let map = {
          pkInv: selectedInv.value.pkInv,
          pkCorp: pkCorp,
          invcode: selectedInv.value.invcode,
          invname: selectedInv.value.invname,
          invspec: selectedInv.value.invspec,
          invtype: selectedInv.value.invtype,
          measName: selectedInv.value.meas_name,
          version: '',
          versionDesc: '',
          isDefault: 1,
          proutingDetails: [],
        }
        state.gylxData = [map]
      } else {
        state.gylxData = res.data
      }
    }
  }

  const selectedCallback = async (xuanZinv) => {
    selectedInv.value = xuanZinv

    getProuts()
  }

  onMounted(async () => {
    if (route.query.pkInv && route.query.invcode) {
      let params = {
        pkCorp: pkCorp,
        pkInv: route.query.pkInv ? route.query.pkInv : '',
        invcode: route.query.invcode ? route.query.invcode : '',
      }
      const { code, data } = await getProutingApi(params)
      if (code === 2000) {
        state.gylxData = data
      }
    }
  })
  watch(route, async () => {
    if (route.query.pkInv && route.query.invcode) {
      let params = {
        pkCorp: pkCorp,
        pkInv: route.query.pkInv ? route.query.pkInv : '',
        invcode: route.query.invcode ? route.query.invcode : '',
      }
      const { code, data } = await getProutingApi(params)
      if (code === 2000) {
        state.gylxData = data
      }
    }
  })
</script>

<style lang="scss" scoped>
  .gongnengQuyu {
    display: flex;
    flex-direction: row;
  }
</style>
